import {calculatePossibleMoves} from "./Rules.js";
import {
    RenderGame,
    renderBoardMarks,
    showGameResultModal,
    RenderChessPieceSelectionBox,
    hideGameResultModal
} from "./Rendering.js"

import {showToast} from "../Toast.js"

// 当前哪一方移动
// 有三个值：black red GameOver
let WhichIsCurrentlyMoving = '';


let PiecesData = [];

//初始化棋盘数据渲染
function renderChessboard() {
    RenderGame(PiecesData, handlePieceClick);
}

// 渲染棋子点击后 可以点击的标记点 处理事件
function handlePieceClick(event) {
    const pieceElement = event.target;

    const color = pieceElement.dataset.color;

    if (WhichIsCurrentlyMoving !== color) {
        if (color === 'black') {
            showToast("请等待红方下棋");
            return;
        } else if (color === 'red') {
            showToast("请等待黑方下棋");
            return;
        }
        // 游戏结束
        return;
    }

    const x = parseInt(pieceElement.dataset.x);
    const y = parseInt(pieceElement.dataset.y);
    const type = pieceElement.dataset.type;
    // 选择棋子时棋子的框渲染
    RenderChessPieceSelectionBox(color, x, y)

    // 标记点点击事件
    function possibleMovesEventListener(moveX, moveY) {
        handlePieceMove(type, color, x, y, moveX, moveY);
        renderChessboard()
    }


    // 渲染标记点
    renderBoardMarks(type, color, x, y, calculatePossibleMoves(type, color, x, y, PiecesData), possibleMovesEventListener);
}

// 游戏结束
function GameOver(color) {
    WhichIsCurrentlyMoving = 'GameOver';
    showGameResultModal(color)
}

//初始化象棋数据
function initPiecesData() {
    PiecesData = [
        {type: '车', color: 'black', x: 0, y: 0},
        {type: '马', color: 'black', x: 1, y: 0},
        {type: '象', color: 'black', x: 2, y: 0},
        {type: '士', color: 'black', x: 3, y: 0},
        {type: '将', color: 'black', x: 4, y: 0},
        {type: '士', color: 'black', x: 5, y: 0},
        {type: '象', color: 'black', x: 6, y: 0},
        {type: '马', color: 'black', x: 7, y: 0},
        {type: '车', color: 'black', x: 8, y: 0},
        {type: '炮', color: 'black', x: 1, y: 2},
        {type: '炮', color: 'black', x: 7, y: 2},
        {type: '卒', color: 'black', x: 0, y: 3},
        {type: '卒', color: 'black', x: 2, y: 3},
        {type: '卒', color: 'black', x: 4, y: 3},
        {type: '卒', color: 'black', x: 6, y: 3},
        {type: '卒', color: 'black', x: 8, y: 3},
        {type: '车', color: 'red', x: 0, y: 9},
        {type: '马', color: 'red', x: 1, y: 9},
        {type: '相', color: 'red', x: 2, y: 9},
        {type: '仕', color: 'red', x: 3, y: 9},
        {type: '帅', color: 'red', x: 4, y: 9},
        {type: '仕', color: 'red', x: 5, y: 9},
        {type: '相', color: 'red', x: 6, y: 9},
        {type: '马', color: 'red', x: 7, y: 9},
        {type: '车', color: 'red', x: 8, y: 9},
        {type: '炮', color: 'red', x: 1, y: 7},
        {type: '炮', color: 'red', x: 7, y: 7},
        {type: '兵', color: 'red', x: 0, y: 6},
        {type: '兵', color: 'red', x: 2, y: 6},
        {type: '兵', color: 'red', x: 4, y: 6},
        {type: '兵', color: 'red', x: 6, y: 6},
        {type: '兵', color: 'red', x: 8, y: 6}
    ];
    WhichIsCurrentlyMoving = 'red';
    hideGameResultModal()
    renderChessboard()
}

//修改象棋数据 (移动)
function revisePiecesData(type, color, piecesX, piecesY, newX, newY) {
    let pieceIndex = PiecesData.findIndex(piece =>
        piece.type === type &&
        piece.color === color &&
        piece.x === piecesX &&
        piece.y === piecesY
    );

    PiecesData[pieceIndex] = {
        type: type,
        color: color,
        x: newX,
        y: newY
    };

    WhichIsCurrentlyMoving = WhichIsCurrentlyMoving === 'black' ? 'red' : 'black';
}

//删除象棋数据 （吃子）
function deletePiecesData(type, color, x, y, newX, newY) {

    //
    const piece = PiecesData.find(piece => piece.x === newX && piece.y === newY);


    if (piece.type === "将" || piece.type === "帅") {
        GameOver(color);
    }
    //要删除 PiecesData 中的特定对象，可以使用 JavaScript 的数组方法 filter。
    // 这个方法会创建一个新数组，包含所有不满足指定条件的元素。在这个例子中，我们需要找到并删除与给定类型、颜色和坐标匹配的对象。
    PiecesData = PiecesData.filter(piece => !(piece.x === newX && piece.y === newY));


    revisePiecesData(type, color, x, y, newX, newY);
}


// 移动棋盘
function handlePieceMove(type, color, piecesX, piecesY, moveX, moveY) {
    // 移除之前的选择框
    for (let selectionBox of document.querySelectorAll('.selection-box')) {
        selectionBox.remove();
    }
    //盘标记点
    for (let markBox of document.querySelectorAll('.mark-box')) {
        markBox.remove();
    }

    // 检查目标位置是否有其他棋子
    const targetPieceIndex = PiecesData.findIndex(piece =>
        piece.x === moveX &&
        piece.y === moveY
    );

    if (targetPieceIndex !== -1) {
        // 如果有棋子，就删除
        deletePiecesData(type, color, piecesX, piecesY, moveX, moveY);
    } else {
        revisePiecesData(type, color, piecesX, piecesY, moveX, moveY);
    }

}

// 页面加载完成后渲染棋盘
window.onload = function () {
    initPiecesData()
    document.getElementById('newRoundBattle').addEventListener('click', initPiecesData);
};

